feat(button): [button] add custom-style attribute #3535
Conversation
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ButtonComponent
participant DOM
User->>ButtonComponent: Passes customStyle prop
ButtonComponent->>DOM: Renders <button :style="customStyle">
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/button/icon-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
examples/sites/demos/pc/app/button/icon.vue (1)
6-8: Consider a more practical demo example for custom-style.The current demo uses
maxWidth: 'none'with artificially long repeated text, which doesn't showcase a realistic use case. Consider demonstrating more practical styling scenarios like color customization, padding adjustments, or responsive styling.- <tiny-button :icon="IconSearch" :custom-style="{ maxWidth: 'none' }"> - 图标按钮图标按钮图标按钮图标按钮 - </tiny-button> + <tiny-button :icon="IconSearch" :custom-style="{ backgroundColor: '#ff6b6b', color: 'white' }"> + 自定义样式按钮 + </tiny-button>examples/sites/demos/mobile-first/app/button/type.vue (1)
7-7: Use a more meaningful demo for custom-style feature.Similar to the PC demo, this example with
maxWidth: 'none'and repeated text doesn't demonstrate practical usage of the custom-style feature. Consider showing more realistic styling scenarios.- <tiny-button type="warning" :custom-style="{ maxWidth: 'none' }"> 警告按钮 警告按钮警告按钮警告按钮</tiny-button> + <tiny-button type="warning" :custom-style="{ borderRadius: '20px', padding: '12px 24px' }"> 自定义圆角警告按钮</tiny-button>examples/sites/demos/pc/app/button/icon-composition-api.vue (1)
7-8: Consider more practical demo styling.Similar to other demo files, this example doesn't showcase realistic usage of the custom-style feature.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
examples/sites/demos/apis/button.js(1 hunks)examples/sites/demos/mobile-first/app/button/type.vue(1 hunks)examples/sites/demos/mobile-first/app/button/webdoc/button.js(1 hunks)examples/sites/demos/pc/app/button/icon-composition-api.vue(1 hunks)examples/sites/demos/pc/app/button/icon.vue(1 hunks)examples/sites/demos/pc/app/button/webdoc/button.js(1 hunks)packages/vue/src/button/src/index.ts(1 hunks)packages/vue/src/button/src/mobile-first.vue(2 hunks)packages/vue/src/button/src/pc.vue(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*`: 用于写产品需求和开发文档的文件，需求应尽量写得简单清晰易懂。 在需求设计阶段应遵从逐步迭代的原则，早期版本可以尽量简洁。
**/*: 用于写产品需求和开发文档的文件，需求应尽量写得简单清晰易懂。
在需求设计阶段应遵从逐步迭代的原则，早期版本可以尽量简洁。
📄 Source: CodeRabbit Inference Engine (.cursor/rules/product.mdc)
List of files the instruction was applied to:
examples/sites/demos/mobile-first/app/button/type.vuepackages/vue/src/button/src/pc.vueexamples/sites/demos/mobile-first/app/button/webdoc/button.jspackages/vue/src/button/src/mobile-first.vueexamples/sites/demos/pc/app/button/webdoc/button.jsexamples/sites/demos/pc/app/button/icon.vuepackages/vue/src/button/src/index.tsexamples/sites/demos/pc/app/button/icon-composition-api.vueexamples/sites/demos/apis/button.js
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (7)
examples/sites/demos/pc/app/button/webdoc/button.js (1)
50-52: Documentation update looks good.The bilingual documentation correctly describes the new
custom-styleproperty and maintains consistency with existing documentation patterns.packages/vue/src/button/src/pc.vue (2)
33-33: Core implementation is correct.The style binding correctly applies the
customStyleprop to the button element, enabling inline custom styling functionality.
71-71: Prop declaration is properly added.The
customStyleprop is correctly added to the component's props array, completing the feature implementation.packages/vue/src/button/src/mobile-first.vue (2)
25-25: LGTM! Clean style binding implementation.The
:style="customStyle"binding is correctly placed and follows Vue.js conventions for dynamic style binding.
66-67: LGTM! Prop properly added to component definition.The
customStyleprop is correctly added to the props array following the existing pattern.examples/sites/demos/mobile-first/app/button/webdoc/button.js (1)
75-77: LGTM! Documentation properly updated for both languages.The descriptions correctly mention the new
custom-styleattribute alongside the existingtypeattribute, maintaining consistency in both Chinese and English versions.packages/vue/src/button/src/index.ts (1)
82-86: LGTM! Proper prop definition with correct default value pattern.The
customStyleprop is well-defined with:
- Appropriate
Objecttype for style objects- Factory function
() => ({})to prevent reference sharing between component instances- Clear JSDoc documentation in Chinese
| { | ||
| name: 'custom-style', | ||
| type: 'object', | ||
| defaultValue: '', | ||
| desc: { | ||
| 'zh-CN': '设置 custom-style 属性按钮样式', | ||
| 'en-US': 'Set the custom-style attribute to customize the button style' | ||
| }, | ||
| meta: { | ||
| stable: '3.25.0' | ||
| }, | ||
| mode: ['pc', 'mobile-first'], | ||
| pcDemo: 'icon', | ||
| mfDemo: 'type' | ||
| }, |
There was a problem hiding this comment.
Fix the defaultValue inconsistency.
The API documentation shows defaultValue: '' but the actual implementation in index.ts uses default: () => ({}) which returns an empty object, not an empty string.
Apply this fix to match the implementation:
- defaultValue: '',
+ defaultValue: '{}',Otherwise, the API documentation is comprehensive and well-structured with proper bilingual descriptions and version metadata.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { | |
| name: 'custom-style', | |
| type: 'object', | |
| defaultValue: '', | |
| desc: { | |
| 'zh-CN': '设置 custom-style 属性按钮样式', | |
| 'en-US': 'Set the custom-style attribute to customize the button style' | |
| }, | |
| meta: { | |
| stable: '3.25.0' | |
| }, | |
| mode: ['pc', 'mobile-first'], | |
| pcDemo: 'icon', | |
| mfDemo: 'type' | |
| }, | |
| { | |
| name: 'custom-style', | |
| type: 'object', | |
| defaultValue: '{}', | |
| desc: { | |
| 'zh-CN': '设置 custom-style 属性按钮样式', | |
| 'en-US': 'Set the custom-style attribute to customize the button style' | |
| }, | |
| meta: { | |
| stable: '3.25.0' | |
| }, | |
| mode: ['pc', 'mobile-first'], | |
| pcDemo: 'icon', | |
| mfDemo: 'type' | |
| }, |
🤖 Prompt for AI Agents
In examples/sites/demos/apis/button.js around lines 66 to 80, the defaultValue
for the 'custom-style' property is set to an empty string '', but the actual
implementation in index.ts uses a default function returning an empty object.
Update the defaultValue in this file to be a function returning an empty object
to match the implementation and ensure consistency between documentation and
code.
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Documentation
Style